<template>
	<view>
		<view class="pop-b">
			<view class="pop-b-t">
				请输入抵扣车币
			</view>
		
			<view class="coupon-c">
					<view class="coupon-enter">
						<view class="coupon-input"><input type="text" v-model="inputCouponCode" placeholder="请输入抵扣车币" /></view>
						<view class="coupon-enter-btn" @click="useInputCouponCode"><button class="btn btn-b">确认</button></view>
					</view>
			</view>
		</view>
		<view class="button-bottom">
			<button class="btn btn-square" @click="notUseCouponCode()">不使用车币</button>
			<button class="btn btn-square btn-b" @click="useInputCouponCode()">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			deductionNum: {
				default: '',
			},
			previousNum:{
				default: '',
			}
		},
		data() {
			return {
				inputCouponCode: '' // 输入的抵扣车币数量
			};
		},
		watch:{
			previousNum(val) {
				this.inputCouponCode = val
			}
		},
		methods:{
			// 不使用车币
			notUseCouponCode() {
				this.inputCouponCode = 0
				this.$emit('notConfirm');
				this.$emit('toclose');
			},
			// 抵扣车币数量使用
			useInputCouponCode() {
				if (!this.inputCouponCode || this.inputCouponCode == '0') {
					this.$common.errorToShow('请输入抵扣车币');
				} else if(parseInt(this.inputCouponCode) > parseInt(this.deductionNum)) {
					this.$common.errorToShow(`最大抵扣车币${this.deductionNum}`);
				}else {
					this.$emit('confirm',this.inputCouponCode);
				}
			}
		}
	}
</script>

<style lang="less">
.pop-b-t {
	background-color: #fff;
	width: 100%;
	padding: 20rpx 0;
	text-align: center;
	color: rgb(51, 51, 51);
	color: #333333;
}
.coupon-c {
	/* padding: 50upx; */
	height: 546upx;
	box-sizing: border-box;
}
.coupon-enter{
    display: flex;
    height: 60upx;
    margin: 40upx;
}
.coupon-enter>view{
    display: inline-block;
}
.coupon-input{
    /* width: 450upx; */
    flex: 1;
    border: 2upx solid #e8e8e8;
    background-color: #fff;
    height: 100%;
        display: block;
}
.coupon-input input{
    height: 100%;
    font-size: 26upx;
    padding: 2upx 10upx;
}
.coupon-enter-btn{
    height: 100%;
    margin-left: 20upx;
}
.coupon-enter-btn .btn{
    font-size: 24upx;
    height: 100%;
    width: 108upx;
    line-height: 58upx;
	border: 1px solid #e93323;
	background-color: #e93323;
}
.button-bottom .btn-b {
	border: 1px solid #e93323;
	background-color: #e93323;
}
</style>
